import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';

// 自定义组件，用于处理代码块  
const CodeBlock = ({ language, value, ...props }) => {
    if (!language) return <code {...props}>{value}</code>;
    console.log('语言', language)
    return (
        <SyntaxHighlighter
            language={language}
            style={dracula}
            {...props}
        >
            {value}
        </SyntaxHighlighter>
    );
};

// 创建一个对象，映射Markdown元素到React组件  
const customComponents = {
    code({ node, inline, className, children, ...props }) {
        // 内联代码使用普通的`code`标签  
        if (inline) {
            return <code className={className} {...props}>{children}</code>;
        }

        // 解析语言并返回自定义的CodeBlock组件  
        const match = /language-(\w+)/.exec(className || '');
        return match ? (
            <CodeBlock language={match[1]} value={String(children).replace(/\n$/, '')} {...props} />
        ) : (
            <code className={className} {...props}>
                {children}
            </code>
        );
    },
};

const MarkdownRenderer = ({ markdownText }) => {
    return (
        <div>
            <ReactMarkdown components={customComponents}>{markdownText}</ReactMarkdown>
        </div>
    );
};

export default MarkdownRenderer;